<template>
  <div v-if="isAuth(['ROOT', 'DRIVER:SELECT'])">
    <el-form :inline="true" :model="searchForm" :rules="dataRule" ref="searchForm">
      <el-form-item prop="name"><el-input v-model="searchForm.query.driverName" placeholder="姓名" size="medium" class="input" clearable="clearable" /></el-form-item>
      <el-form-item>
        <el-select v-model="searchForm.query.driverContractStatus" class="input" placeholder="状态" size="medium" clearable="clearable">
          <el-option label="作废" value="0" />
          <el-option label="有效" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item><el-button size="medium" type="primary" @click="loadDataList()">查询</el-button></el-form-item>
      <el-form-item>
        <el-button size="medium" type="primary" @click="uploadModel()">合同上传</el-button>
      </el-form-item>
    </el-form>
    <el-table
        :data="dataList"
        border
        v-loading="dataListLoading"
        cell-style="padding: 2px 0"
        style="width: 100%;"
        size="medium"
        @expand-change="expand"
        :row-key="getRowKeys"
        :expand-row-keys="expands"
    >

      <el-table-column prop="driverName" header-align="center" align="center" min-width="80" label="姓名" />
      <el-table-column prop="driverContractNum" header-align="center" align="center" min-width="110" label="合同编号" />
      <el-table-column prop="driverContractStatus" header-align="center" align="center" min-width="100" label="合同状态" >
        <template #default="scope" >
          <el-tag v-if="scope.row.driverContractStatus === 1" type="success">有效</el-tag>
          <el-tag v-if="scope.row.driverContractStatus === 0 " type="danger">作废</el-tag>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="center" width="250" label="操作">
        <template #default="scope">
          <el-button type="text" size="medium"
                     @click="showApproveModel(scope.row.id)" >
            查看合同
          </el-button>
          <el-button type="text" size="medium"
                     @click="showRepealModel(scope.row.id)" :disabled="scope.row.driverContractStatus != 1">
            作废
          </el-button>

        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="searchForm.page"
        :page-sizes="[10, 20, 50]"
        :page-size="searchForm.rows"
        :total="totalCount"
        layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>

    <el-dialog v-model="uploadModelVisible" title="合同上传" width="400px" center>
      <el-form :model="searchForm" label-width="80px" ref="searchForm">
        <el-form-item label="选择司机" prop="driverName">
          <el-select v-model="dataList.driverName" placeholder="请选择">
            <el-option
                v-for="item in dataList"
                :key="item.driverName"
                :label="item.driverName"
                :value="item.driverName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合同编号" prop="driverContractNum">
          <el-input v-model="searchForm.query.driverContractNum" ></el-input>
        </el-form-item>
        <el-form-item prop="driverContractAddress" >
          <el-upload
              name="uploadFile"
              :file-list="fileList"
              class="upload-demo"
              action="http://localhost:10010/fccar/driver/admin/driver/upload"
              multiple:false
              :on-success="handleSuccess"
              :on-exceed="exceed"
              accept=".pdf,.doc,.docx"
          >
            <el-button size="medium" type="primary">合同上传</el-button>
          </el-upload>
          <template #footer>
				<span class="dialog-footer">
					<el-button @click="repealModelVisible = false">取消</el-button>
					<el-button type="primary" @click="saveSubmit">确定</el-button>
				</span>
          </template>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog v-model="repealModelVisible" title="提示信息" width="400px" center>
      <div class="notice">你确定作废该代驾司机的代价合同吗？</div>
      <template #footer>
				<span class="dialog-footer">
					<el-button @click="repealModelVisible = false">取消</el-button>
					<el-button type="primary" @click="repealHandle">确定</el-button>
				</span>
      </template>
    </el-dialog>
    <update ref="update" @refreshDataList="loadDataList"></update>
  </div>
</template>
<script>
import $ from 'jquery';
import request from '../utils/request'
import Update from './driver-update.vue';
import {ElMessage} from "element-plus";


export default {
  components: {
    Update
  },
  data() {
    return {
      //文件上传相关参数

      //文件集合
      fileList: [],
      cancelAuditRemark:"",
      auditRemark:"",
      searchForm: {
        query:{
          driverName: null,
          driverContractStatus: null,
          driverContractNum:null,
          driverContractAddress : null,
        },
        page: 1,
        rows: 10
      },
      chart: '',
      dataList: [],
      totalCount: 0,
      dataListLoading: false,
      dataRule: {

      },
      expands: [],
      uploadModelVisible: false,
      repealModelVisible: false,
      driverContractId: null,
      getRowKeys(row) {
        return row.id;
      }
    };
  },
  methods: {
    //查看合同
    showApproveModel(){
      let _this = this;
      let param = {
       driverContractId : _this.driverContractId,
        driverContractAddress : _this.driverContractAddress
      }
      _this.post("/driver/admin/driver/seecontract" ,param ,(res) => {
        let {success,message} = res;
        if (success){

        }else{
          ElMessage.error(message);
        }
      })
    },
    //生成编号
    getProjectNum () {
      const projectTime = new Date() // 当前中国标准时间
      const Year = projectTime.getFullYear() // 获取当前年份 支持IE和火狐浏览器.
      const Month = projectTime.getMonth() + 1 // 获取中国区月份
      const Day = projectTime.getDate() // 获取几号
      var CurrentDate = Year
      if (Month >= 10) { // 判断月份和几号是否大于10或者小于10
        CurrentDate += Month
      } else {
        CurrentDate += '0' + Month
      }
      if (Day >= 10) {
        CurrentDate += Day
      } else {
        CurrentDate += '0' + Day
      }
      this.searchForm.query.driverContractNum = CurrentDate + Math.floor(Math.random()*10000);
    },
    //作废
    repealHandle(){
      let _this = this;
      _this.post("/driver/admin/driver/changestatus/" + _this.driverContractId,(res) => {
        let {success,message} = res;
        if (success){
          _this.driverContractStatus = 0;
          this.repealModelVisible= true;
        }else{
          ElMessage.error(message);
        }
      })
    },
    //上传按钮
    uploadModel(){
      this.uploadModelVisible = true;
      this.getProjectNum();

    },

    /**撤销认证的弹窗**/
    showRepealModel(driverContractId){
      this.driverContractId = driverContractId;
      this.repealModelVisible= true;
    },
    /** 格式化实名状态 **/
    realAuthFormatter(row){
      console.log(row)
      switch (row.driverContractStatus){
        case 0:return "作废";
        case 1:return "有效";
      }
      return "未知";
    },
    //加载列表数据
    loadDataList(){
      let _this = this;
      for(var prop in _this.searchForm.query) {
        if (_this.searchForm.query[prop] == "") {
          _this.searchForm.query[prop] = null;
        }
      }
      _this.post("/driver/manager/driverContract/pagelist",_this.searchForm,(res)=>{
        let {success,data} = res;
        if(success){

          _this.totalCount = data.total;
          _this.dataList = data.rows;

        }
      });

    },
    handleSuccess(response, file, fileList) {

      this.uploadModelVisible = false;
      console.log(response);
      this.searchForm.query.driverContractAddress = response.data;
      //维护fileList (清空)
      this.fileList = [];
      this.searchForm = {
        query:{
          driverName: null,
          driverContractStatus: null,
          driverContractNum:null,
          driverContractAddress : null,
        },
        page: 1,
        rows: 10
      }
      this.loadDataList();
    },
    exceed() {
      this.$message.error("只允许单个文件上传")
    }
  },
  created: function() {
    this.loadDataList();
  }
};
</script>

<style>

</style>
